<template>
  <ContainerGroup>
    <Container height="fill" style="margin-top: 0">
      <div class="btn-box">
        <Button style="margin-right: 12px" @click="handlePrint">打印</Button>
        <Button @click="handleDownload">下载</Button>
      </div>
      <div class="certificate-box">
        <div id="printContent" ref="printContent" class="certificate">
          <p class="title">苏州大学附属第二医院</p>
          <p class="title">住院证</p>
          <p v-if="patientInfo.patientTag == 2" class="mark">院前准备</p>
          <div class="bar-code">
            <barcode :value="barCodeValue" :options="barCodeOption">
              条形码加载失败
            </barcode>
          </div>
          <div class="main">
            <div class="left-box">
              <div>
                <div class="line first-line">
                  <a>急</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{
                        checkboxchecked: patientInfo.ifEmergency === '1',
                      }"
                    />
                  </div>
                  <a>平（步行</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{ checkboxchecked: patientInfo.ifWalk === '1' }"
                    />
                  </div>
                  <a>、抬椅</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{ checkboxchecked: patientInfo.ifChair === '1' }"
                    />
                  </div>
                  <a>、病车</a>
                  <div class="check-square">
                    <i
                      class="el-icon-check"
                      :class="{
                        checkboxchecked: patientInfo.ifAmbulance === '1',
                      }"
                    />
                  </div>
                  <a>)</a>
                </div>
                <div class="line second-line">
                  <a>住院科别</a>
                  <div>{{ patientInfo.deptName }}</div>
                  <a>病区</a>
                  <div>{{ patientInfo.nurseCellName }}</div>
                  <a>床号</a>
                  <div>{{ patientInfo.bedNo }}</div>
                </div>
                <div class="line third-line">
                  <a>病人姓名</a>
                  <div>{{ patientInfo.name }}</div>
                  <a>性别</a>
                  <div>{{ patientInfo.sex === "1" ? "男" : "女" }}</div>
                  <a>年龄</a>
                  <div>{{ patientInfo.age }}</div>
                  <a>职业</a>
                  <div>{{ patientInfo.profCode }}</div>
                  <a>籍贯</a>
                  <div>{{ patientInfo.dist }}</div>
                </div>
                <div class="line forth-line">
                  <a>初步诊断</a>
                  <div>{{ patientInfo.diagName }}</div>
                </div>
                <div class="line forth-line">
                  <a>描述诊断</a>
                  <div>{{ patientInfo.mszd }}</div>
                </div>
                <div class="line fifth-line">
                  <div class="left-part">
                    <a>需要预交住院费</a>
                    <a>{{ patientInfo.prepayCost }}</a>
                    <a>元</a>
                  </div>
                  <div class="right-part" style="flex: 1">
                    <a>自费</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.paykindCode === '1',
                        }"
                      />
                    </div>
                    <a>、参保</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.paykindCode === '2',
                        }"
                      />
                    </div>
                    <a>、其他</a>
                    <div
                      style="
                        border: none;
                        border-bottom: 1px solid #333;
                        flex: 1;
                      "
                    />
                  </div>
                </div>
                <div
                  class="line sixth-line"
                  style="justify-content: space-between"
                >
                  <div style="display: flex">
                    <a>是否31日内非计划再次入院</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.ifInhosPlan === '1',
                        }"
                      />
                    </div>
                  </div>
                  <div style="display: flex">
                    <a>是否外伤入院</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{
                          checkboxchecked: patientInfo.ifInhosExternal === '1',
                        }"
                      />
                    </div>
                  </div>
                  <div style="display: flex">
                    <a>是否日间手术</a>
                    <div class="check-square">
                      <i
                        class="el-icon-check"
                        :class="{ checkboxchecked: patientInfo.ifRjbf === '1' }"
                      />
                    </div>
                  </div>
                </div>
                <div class="line forth-line">
                  <a>入院医嘱</a>
                  <div />
                </div>
                <div class="line forth-line">
                  <a>备注</a>
                  <div>{{ patientInfo.beizhu }}</div>
                </div>
                <div
                  class="line seventh-line"
                  style="justify-content: space-between"
                >
                  <div class="seven-left" style="display: flex; flex: 1.5">
                    <a>日期</a>
                    <div style="flex: 1; border-bottom: 1px solid #333">
                      {{ patientInfo.predate }}
                    </div>
                  </div>
                  <div class="seventh-right" style="display: flex; flex: 1">
                    <a>医师</a>
                    <div
                      style="flex: 1; border-bottom: 1px solid #333; margin: 0"
                    >
                      {{ patientInfo.doctName }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="right-box">
              <div class="line forth-line">
                <a>门诊号</a>
                <div>{{ patientInfo.cardNo }}</div>
              </div>
              <div class="line forth-line">
                <a>处方号</a>
                <div>{{ patientInfo.clinicCode }}</div>
              </div>
              <div class="line forth-line">
                <a>入院日期</a>
                <div>{{ patientInfo.ryTime }}</div>
              </div>
              <div class="line forth-line">
                <a>现地址</a>
                <div>{{ patientInfo.home }}</div>
              </div>
              <div class="line forth-line">
                <a>电话</a>
                <div>{{ patientInfo.homeTel }}</div>
              </div>
              <div class="line forth-line">
                <a>身份证号</a>
                <div>{{ patientInfo.idenno }}</div>
              </div>
              <div class="line forth-line">
                <a>工作单位</a>
                <div>{{ patientInfo.workName }}</div>
              </div>
              <div class="line forth-line">
                <a>联系人</a>
                <div>{{ patientInfo.linkmaName }}</div>
              </div>
              <div
                class="line seventh-line"
                style="justify-content: space-between"
              >
                <div class="seven-left" style="display: flex; flex: 1">
                  <a>关系</a>
                  <div style="flex: 1; border-bottom: 1px solid #333">
                    {{ patientInfo.relaCode }}
                  </div>
                </div>
                <div class="seventh-right" style="display: flex; flex: 1.5">
                  <a>电话</a>
                  <div
                    style="flex: 1; border-bottom: 1px solid #333; margin: 0"
                  >
                    {{ patientInfo.linkmanTel }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
import html2canvas from "html2canvas";
import printJS from "print-js";
import { getPrintHospitalCertificate } from "../../utils/apis/InpatientRegistration.js";

export default {
  name: "HospitalCertificate",
  components: {},
  data() {
    return {
      form: {
        type: "",
      },
      patientInfo: {},
      // patientInfo: {
      //   preid: '28834',
      //   name: '阿斯顿',
      //   sex: '2',
      //   dist: '江苏省苏州市',
      //   diagName: '股骨头坏死',
      //   age: '48',
      //   predate: '2021-10-20',
      //   doctName: '卡特琳娜',
      //   deptCode: '0001',
      //   deptName: '骨科',
      //   bedNo: 'A11332',
      //   nurseCellName: '东十一病区',
      //   linkmanTel: '13134564567',
      //   cardNo: '0005071685',
      //   mszd: '挺严重的，得治',
      //   clinicCode: 'MZ000012344321',
      //   ifEmergency: '0',
      //   ifWalk: '1',
      //   ifChair: '0',
      //   ifAmbulance: '0',
      //   profCode: '伐木工',
      //   prepayCost: 10000,
      //   paykindCode: '1',
      //   ifInhosPlan: '1',
      //   ifInhosExternal: '0',
      //   ifRjbf: '1',
      //   beizhu: '有钱没钱，回家过年',
      //   predoctCode: '卡西奥佩娅',
      //   ryTime: '2021-10-19', // ?
      //   linkmanAdd: '漂流瓶见',
      //   idenno: '230101198810010119',
      //   workName: '西北砍王伐木公司',
      //   linkmaName: '金刀大汗',
      //   relaCode: '仇人',
      //   homeTel: '18978969876'
      // },
      idCard: "",
      deptCode: "",
      preId: "",
      barCodeValue: "45836",
      barCodeOption: {
        height: 30,
      },
    };
  },
  created() {
    // this._getPrintHospitalCertificate();
  },
  activated() {
    this.idCard = "";
    this.deptCode = "";
    console.log("赋值前-接收参数", this.$route.query);
    console.log("赋值前-接收参数", this.idCard);
    this.idCard = this.$route.query.idCard;
    this.deptCode = this.$route.query.deptCode;
    console.log("赋值后-接收参数", this.idCard);
    console.log("赋值后-接收参数", this.$route.query);
    this.preId = this.$route.query.preId
    this._getPrintHospitalCertificate();
  },
  mounted() {},
  methods: {
    _getPrintHospitalCertificate() {
      const params = {
        idCard: this.idCard,
        deptCode: this.deptCode,
        preId: this.preId
      };
      console.log("校验病人参数", params);
      getPrintHospitalCertificate(params).then((res) => {
        console.log("后端数据获取结果", res);
        if (res.data.code === 200) {
          this.patientInfo = res.data.data.outpatient[0];
          this.barCodeValue = res.data.data.outpatient[0].preid;
        }
      });
    },
    handlePrint() {
      html2canvas(document.getElementById("printContent"), {
        useCORS: true,
        logging: true,
      }).then((canvas) => {
        const url = canvas.toDataURL();
        printJS({
          printable: url,
          type: "image",
          documentTitle: `${this.patientInfo.name}住院证`,
        });
      });
    },
    handleDownload() {
      html2canvas(document.getElementById("printContent"), {
        useCORS: true,
        logging: true,
      }).then((canvas) => {
        canvas.toBlob((blob) => {
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", `${this.patientInfo.name}住院证`);
          document.body.appendChild(link);
          link.click();
        }, "image/png");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.btn-box {
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 12px;
}
.certificate-box {
  width: 100%;
  .certificate {
    border: 1px dashed #ccc;
    margin: 0 auto;
    height: 600px;
    width: 919px;
    padding: 8px;
    text-align: center;
    position: relative;
    .title {
      margin: 12px 0;
      font-size: 28px;
      letter-spacing: 8px;
    }
    .mark {
      position: absolute;
      left: 8px;
      top: 78px;
    }
    .bar-code {
      position: absolute;
      right: 0;
      top: 38px;
    }
    .main {
      margin-top: 28px;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      .left-box {
        padding: 8px;
        width: 64%;
        height: 100%;
        border-right: 1px solid #000;
      }
      .right-box {
        padding: 8px;
        width: 36%;
        height: 100%;
        .line {
          margin-bottom: 30.5px;
        }
      }
    }
    .line {
      margin-bottom: 24px;
      display: flex;
      a,
      div {
        margin-right: 8px;
      }
      .left-part,
      .right-part {
        a,
        div {
          margin-right: 8px;
        }
      }
      .left-part {
        margin-right: 20px;
      }
      .right-part {
        display: flex;
      }
    }
    .first-line {
      display: flex;
      a,
      div {
        margin-right: 8px;
      }
    }
    .second-line,
    .third-line,
    .forth-line {
      div {
        flex: 1;
        border-bottom: 1px solid #333;
      }
    }
    .third-line {
      div:last-of-type {
        flex: 2;
      }
    }
    .check-square {
      box-sizing: border-box;
      height: 22px;
      width: 22px;
      border: 1px solid #333;
      border-radius: 3px;
    }
  }
}
.checkboxchecked {
  color: #333 !important;
}
/deep/ .el-icon-check {
  color: #fff;
}
</style>
